{% extends 'base.html' %}

{% block head %}
{{ super() }}
<style>
.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.form-title {
    color: #2c3e50;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-control:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.2rem rgba(74,144,226,0.25);
}

.btn-group {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.required-field::after {
    content: "*";
    color: red;
    margin-left: 4px;
}
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <h2 class="form-title">
        <i class="fas fa-user-edit"></i> 编辑病人信息
    </h2>

    <form method="post">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name" class="required-field">姓名</label>
                    <input type="text" class="form-control" id="name" name="name" 
                           value="{{ patient['姓名'] }}" required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="gender" class="required-field">性别</label>
                    <select class="form-control" id="gender" name="gender" required>
                        <option value="男" {{ 'selected' if patient['性别'] == '男' }} >男</option>
                        <option value="女" {{ 'selected' if patient['性别'] == '女' }} >女</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="birth_date" class="required-field">出生日期</label>
                    <input type="date" class="form-control" id="birth_date" name="birth_date" 
                           value="{{ patient['出生日期'] }}" required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="phone" class="required-field">联系电话</label>
                    <input type="tel" class="form-control" id="phone" name="phone" 
                           value="{{ patient['联系电话'] }}" required
                           pattern="[0-9]{11}" title="请输入11位手机号码">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="card_number">医保卡号</label>
                    <input type="text" class="form-control" id="card_number" name="card_number" 
                           value="{{ patient['医保卡号'] or '' }}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="address" class="required-field">住址</label>
                    <input type="text" class="form-control" id="address" name="address" 
                           value="{{ patient['住址'] }}" required>
                </div>
            </div>
        </div>

        <div class="btn-group">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> 保存修改
            </button>
            <a href="{{ url_for('patients') }}" class="btn btn-secondary">
                <i class="fas fa-times"></i> 取消
            </a>
        </div>
    </form>
</div>

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const phone = document.getElementById('phone').value;
    if (!/^[0-9]{11}$/.test(phone)) {
        e.preventDefault();
        alert('请输入正确的11位手机号码！');
    }
});
</script>
{% endblock %} 